import { defineComponent, reactive, toRefs, h, VNodeChild, ref } from 'vue'
import {
  NInput,
  NForm,
  NFormItem,
  NModal,
  FormRules,
  NSelect,
  NInputNumber,
  NRadio,
  NRadioGroup,
  NSpace,
  NSwitch,
  NIcon
} from 'naive-ui'
import {
  SelectMixedOption,
  SelectOption
} from 'naive-ui/es/select/src/interface'
import * as vicon from '@vicons/ionicons5'
import { addOrUpdateMenuReq } from '@/service/modules/menu'
import { Response } from '@/service/modules/common/types'

function renderIcon(option: SelectOption): VNodeChild {
  const icon = vicon[option.value]
  return [
    h(NIcon, { size: 20 }, { default: () => h(icon) }),
    option.label as string
  ]
}

const iconOptions: SelectMixedOption[] = [
  {
    value: 'Home'
  },
  { value: 'Laptop' },
  { value: 'Location' },
  { value: 'Grid' },
  { value: 'Analytics' },
  { value: 'BagCheck' },
  { value: 'BarChart' },
  { value: 'BookSharp' },
  { value: 'Build' },
  { value: 'Card' },
  { value: 'CartSharp' },
  { value: 'Flag' }
]

const AddMenuModal = defineComponent({
  name: 'AddMenuModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    parentId: {
      type: Number,
      required: true
    }
  },
  emits: ['modalShowChange', 'refreshTree'],
  setup() {
    const state = reactive({
      menuForm: {
        parentId: 0,
        name: '',
        icon: '',
        tabName: '',
        sort: 1,
        type: 0,
        disabled: false
      },
      positiveButtonDisabled: ref(false),
      rules: {
        name: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.menuForm.name === '') {
              return new Error(window.$t('menu.nameTips'))
            }
          }
        },
        sort: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (!state.menuForm.sort) {
              return new Error(window.$t('menu.sortTips'))
            }
          }
        }
      } as FormRules
    })
    return { ...toRefs(state) }
  },
  methods: {
    async onPositiveClick() {
      //输入框存在为空时则确认按钮无效
      if (this.menuForm.name === '' || !this.menuForm.sort) {
        return
      }
      //提交添加菜单请求
      this.menuForm.parentId = this.parentId
      this.positiveButtonDisabled = true
      const res: Response<any> = await addOrUpdateMenuReq({
        ...this.menuForm
      }).catch(() => {
        this.positiveButtonDisabled = false
      })
      if (res.resp_code === 0) {
        this.initData()
        this.$emit('modalShowChange', false)
        this.$emit('refreshTree')
        this.positiveButtonDisabled = false
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.initData()
      this.$emit('modalShowChange', false)
    },
    initData() {
      this.menuForm.parentId = 0
      this.menuForm.name = ''
      this.menuForm.icon = ''
      this.menuForm.tabName = ''
      this.menuForm.sort = 0
      this.menuForm.type = 0
      this.menuForm.disabled = false
      this.positiveButtonDisabled = false
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('menu.addMenuTitle')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={window.$t('dialog.positiveText')}
        negative-text={window.$t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        positiveButtonProps={{
          disabled:
            this.positiveButtonDisabled ||
            !(this.menuForm.name !== '' && this.menuForm.sort)
        }}
        onClose={this.onNegativeClick}
      >
        <NForm
          rules={this.rules}
          label-placement='left'
          require-mark-placement='right-hanging'
          label-width='auto'
        >
          <NFormItem path='name' label={window.$t('menu.name')}>
            <NInput
              type='text'
              v-model={[this.menuForm.name, 'value']}
              placeholder={window.$t('menu.name')}
              autofocus
            />
          </NFormItem>
          <NFormItem path='icon' label={window.$t('menu.icon')}>
            <NSelect
              v-model={[this.menuForm.icon, 'value']}
              filterable
              tag
              options={iconOptions}
              renderLabel={renderIcon}
            />
          </NFormItem>
          <NFormItem path='tabName' label={window.$t('menu.tabName')}>
            <NInput
              type='text'
              v-model={[this.menuForm.tabName, 'value']}
              placeholder={window.$t('menu.tabName')}
            />
          </NFormItem>
          <NFormItem path='sort' label={window.$t('menu.sort')}>
            <NInputNumber v-model={[this.menuForm.sort, 'value']} />
          </NFormItem>
          <NFormItem path='type' label={window.$t('menu.type')}>
            <NRadioGroup
              v-model={[this.menuForm.type, 'value']}
              name='typeGroup'
            >
              <NSpace>
                <NRadio value={0}>{window.$t('menu.menuCatalog')}</NRadio>
                <NRadio value={1}>{window.$t('menu.menuItem')}</NRadio>
              </NSpace>
            </NRadioGroup>
          </NFormItem>
          <NFormItem path='disabled' label={window.$t('menu.disabled')}>
            <NSwitch v-model={[this.menuForm.disabled, 'value']} />
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default AddMenuModal
